<!-- 组委会 -->
<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleShowTable">
      <el-tab-pane label="主办单位" name="sponsor">
        <el-button size="mini" type="primary" @click="openDialog()">
          {{ $t('table.add') }}
        </el-button>
        <el-table class="gl_mt_5" :data="showTableData" stripe size="mini" style="width: 100%">
          <el-table-column prop="organizationName" label="单位名称" :min-width="280" />
          <el-table-column :label="$t('table.actions')" align="center" :width="140">
            <template slot-scope="{ row }">
              <el-button size="mini" type="text" @click="openDialog(row)"> {{ $t('table.edit') }} </el-button>
              <el-button size="mini" type="text" @click="deleteCommittion(row)">
                <span class="gl_color_error">{{ $t('table.delete') }}</span>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="承办单位" name="contractor">
        <el-button size="mini" type="primary" @click="openDialog()">
          {{ $t('table.add') }}
        </el-button>
        <el-table class="gl_mt_5" :data="showTableData" stripe size="mini" style="width: 100%">
          <el-table-column prop="organizationName" label="单位名称" :min-width="280" />
          <el-table-column :label="$t('table.actions')" align="center" :width="140">
            <template slot-scope="{ row }">
              <el-button size="mini" type="text" @click="openDialog(row)"> {{ $t('table.edit') }} </el-button>
              <el-button size="mini" type="text" @click="deleteCommittion(row)">
                <span class="gl_color_error">{{ $t('table.delete') }}</span>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="支持单位" name="support">
        <el-button size="mini" type="primary" @click="openDialog()">
          {{ $t('table.add') }}
        </el-button>
        <el-table class="gl_mt_5" :data="showTableData" stripe size="mini" style="width: 100%">
          <el-table-column prop="organizationName" label="单位名称" :min-width="280" />
          <el-table-column :label="$t('table.actions')" align="center" :width="140">
            <template slot-scope="{ row }">
              <el-button size="mini" type="text" @click="openDialog(row)"> {{ $t('table.edit') }} </el-button>
              <el-button size="mini" type="text" @click="deleteCommittion(row)">
                <span class="gl_color_error">{{ $t('table.delete') }}</span>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="协办单位" name="assistance">
        <el-button size="mini" type="primary" @click="openDialog()">
          {{ $t('table.add') }}
        </el-button>
        <el-table class="gl_mt_5" :data="showTableData" stripe size="mini" style="width: 100%">
          <el-table-column prop="organizationName" label="单位名称" :min-width="280" />
          <el-table-column :label="$t('table.actions')" align="center" :width="140">
            <template slot-scope="{ row }">
              <el-button size="mini" type="text" @click="openDialog(row)"> {{ $t('table.edit') }} </el-button>
              <el-button size="mini" type="text" @click="deleteCommittion(row)">
                <span class="gl_color_error">{{ $t('table.delete') }}</span>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="组委会联系电话" name="phone">
        <el-button size="mini" type="primary" @click="openDialog()">
          {{ $t('table.add') }}
        </el-button>
        <el-table v-loading="tableLoading" class="gl_mt_5" :data="showTableData" stripe size="mini" style="width: 100%">
          <el-table-column prop="organizationName" label="联系电话" :min-width="140" />
          <el-table-column :label="$t('table.actions')" align="center" :width="140">
            <template slot-scope="{ row }">
              <el-button size="mini" type="text" @click="openDialog(row)"> {{ $t('table.edit') }} </el-button>
              <el-button size="mini" type="text" @click="deleteCommittion(row)">
                <span class="gl_color_error">{{ $t('table.delete') }}</span>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      class="gl_dialog_TitleLine"
      width="480px"
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <el-form
        ref="api_POST_CompetitionOrganizationVO"
        v-loading="dialogLoading"
        :model="api_POST_CompetitionOrganizationVO"
        :rules="api_POST_CompetitionOrganizationVO_Rules"
        label-width="80px"
        size="mini"
        @submit.native.prevent
      >
        <template>
          <el-form-item :label="activeName === 'phone' ? '联系电话' : '单位名称'" prop="organizationName">
            <el-input v-model.trim="api_POST_CompetitionOrganizationVO.organizationName" />
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="valid()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { Api_POST_CompetitionOrganizationVO } from '@/lib/form/events';
import {
  api_GET_EventsManagementCompetitionOrganization,
  api_POST_EventsManagementCompetitionOrganization,
  api_DELETE_EventsManagementCompetitionOrganizationId,
  api_PUT_EventsManagementCompetitionOrganizationId
} from '@/extend/api/gameswaggerApi/app';
import { CopyData } from '@/lib';
export default {
  props: {
    gameId: {
      type: String,
      required: false,
      default: ''
    }
  },
  data() {
    return {
      activeName: 'sponsor',
      tableLoading: false,
      tableData: [
        {
          name: '吉林市体育局',
          tel: '01088318250',
          concatName: '张三'
        }
      ],
      showTableData: [],
      dialogVisible: false,
      dialogLoading: false,
      api_POST_CompetitionOrganizationVO: new Api_POST_CompetitionOrganizationVO(),
      api_POST_CompetitionOrganizationVO_Rules: {},
      title: '',
      // 当前选中的组委会id
      competitionId: ''
    };
  },
  created() {
    this.getCommittionList();
  },
  methods: {
    openDialog(row) {
      console.log(this.gameId);
      this.api_POST_CompetitionOrganizationVO = new Api_POST_CompetitionOrganizationVO();
      this.title = '新增';
      this.competitionId = '';
      if (row) {
        this.title = '编辑';
        this.editType = 'edit';
        this.competitionId = row.id;
        CopyData(row, this.api_POST_CompetitionOrganizationVO);
      }
      this.api_POST_CompetitionOrganizationVO_Rules = {
        organizationName: [
          {
            required: true,
            message: '单位名称不能为空',
            trigger: 'blur'
          }
        ]
      };
      switch (this.activeName) {
        // 主办单位
        case 'sponsor':
          this.title += '主办单位';
          break;
        // 承办单位
        case 'contractor':
          this.title += '承办单位';
          break;
        // 协办单位
        case 'assistance':
          this.title += '协办单位';
          break;
        case 'support':
          this.title += '支持单位';
          break;
        // 组委会联系电话
        case 'phone':
          this.title += '组委会联系电话';
          this.api_POST_CompetitionOrganizationVO_Rules = {
            organizationName: [
              {
                required: true,
                message: '联系电话不能为空',
                trigger: 'blur'
              },
              {
                validator(rule, value, callback) {
                  const validReg = /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/;
                  if (value && value !== '' && !validReg.test(value)) {
                    callback(new Error('联系电话格式错误！'));
                  }
                  callback();
                },
                trigger: 'blur'
              }
            ]
          };
          break;
        default:
          break;
      }
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.api_POST_CompetitionOrganizationVO.clearValidate();
      });
    },
    // 获取指定组委会单位列表
    getCommittionList() {
      return new Promise((resolve, reject) => {
        this.tableLoading = true;
        api_GET_EventsManagementCompetitionOrganization({ competitionId: this.gameId }).then(res => {
          this.tableData = res.items || [];
          this.handleShowTable();
          this.tableLoading = false;
        });
      });
    },
    valid() {
      this.$refs.api_POST_CompetitionOrganizationVO.validate(valid => {
        if (!valid) return;
        if (this.competitionId) {
          this.editCommittionList();
        } else {
          this.newCommittionList();
        }
      });
    },
    // 新增组委会
    newCommittionList() {
      this.api_POST_CompetitionOrganizationVO.organizationKey = this.activeName;
      this.api_POST_CompetitionOrganizationVO.competitionId = this.gameId;
      this.dialogLoading = true;
      api_POST_EventsManagementCompetitionOrganization(this.api_POST_CompetitionOrganizationVO).then(res => {
        this.dialogLoading = false;
        this.$message({ type: 'success', message: '新增成功！' });
        this.api_POST_CompetitionOrganizationVO = new Api_POST_CompetitionOrganizationVO();
        this.$refs.api_POST_CompetitionOrganizationVO.resetFields();
        this.dialogVisible = false;
        this.getCommittionList();
      }, error => {
        this.dialogLoading = false;
        this.$message({ type: 'error', message: '新增失败！' + error.error.message });
      });
    },
    // 更新组委会
    editCommittionList() {
      this.dialogLoading = true;
      api_PUT_EventsManagementCompetitionOrganizationId(this.competitionId, this.api_POST_CompetitionOrganizationVO).then(res => {
        this.dialogLoading = false;
        this.$message({ type: 'success', message: '更新成功！' });
        this.getCommittionList();
        this.dialogVisible = false;
      }, error => {
        this.dialogLoading = false;
        this.$message({ type: 'error', message: '更新失败！' + error.error.message });
      });
    },
    // 删除组委会
    deleteCommittion(row) {
      this.$confirm(`您确定要删除该单位吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true;
        api_DELETE_EventsManagementCompetitionOrganizationId(row.id).then(() => {
          this.getCommittionList();
          this.$message({ type: 'success', message: '删除成功！' });
        }, () => {
          this.tableLoading = false;
          this.$message({ type: 'error', message: '删除失败！' + error.error.message });
        });
      }).catch(() => {});
    },
    // 处理显示的表格
    handleShowTable() {
      this.showTableData = this.tableData.filter(item => item.organizationKey === this.activeName);
    }
  }
};
</script>
